import React, { PureComponent } from 'react'
import { View, Text, ScrollView, StyleSheet } from 'react-native'
import { WhiteSpace } from 'antd-mobile'
import { connect } from 'react-redux'
import * as _ from 'lodash'
import Spinner from 'react-native-loading-spinner-overlay'
import { createAction, NavigationActions } from '../../../utils'
import * as commonService from '../../../services/common'
import color from '../../../utils/color'
import screen from '../../../utils/screen'
import TimeChooser from '../components/TimeChooser'
import SingleTitle from '../components/single/SingleTitle'
import { OwnCard, PieChart, LineChart, PullView, ViewMoreText } from '../../../widgets'
import Echarts from '../../../widgets/echarts'

@connect(({ home, loading }) => ({ ...home, isLoading: loading.models.home }))
export default class extends PureComponent {
  static navigationOptions = ({ navigation }) => ({
    title: navigation.state.params.codeName,
    headerTintColor: 'white',
    headerStyle: {
      backgroundColor: color.theme,
      elevation: 0,
      shadowOpacity: 0,
    },
  })

  constructor(props) {
    super(props)
    const params = this.props.navigation.state.params || {}
    const initTime = params['timeD'] || {}
    const xtype = params['xtype'] || ""
    this.state = {
      timeD: initTime,
      xtype: xtype
    }
  }

  componentWillMount() {
    this.props.dispatch(createAction("home/initDetail")({}))
  }

  componentDidMount() {
    // this.props.dispatch(createAction("home/getCommonDetail")(this.getParams()))
  }
  getParams = () => {
    const params = this.props.navigation.state.params || {}
    const startTime = this.state.timeD.startTime
    const endTime = this.state.timeD.endTime
    const useArea = params.useArea
    return {
      startTime: startTime,
      endTime: endTime,
      useArea: useArea
    }
  }

  changeDate = (type, sTime, eTime) => {
    this.setState({
      timeD: {
        startTime: sTime,
        endTime: eTime,
        timeType: type
      }
    }, () => {
      this.props.dispatch(createAction("home/getCommonDetail")(this.getParams()))
    })
  }

  render() {
    const { timeD } = this.state
    const { detailMsg, isLoading } = this.props;
    return (
      <View style={styles.container}>
        <Spinner visible={isLoading} />
        <TimeChooser changeDate={this.changeDate} initTime={timeD} />
        <PullView onPullRelease={() => {
          this.props.dispatch(createAction("home/getCommonDetail")(this.getParams()))
        }}>
          {
            this.renderWithDetailMsg(detailMsg)
          }
        </PullView>
      </View>
    )
  }

  judgeType = (type, data, i) => {
    if(type === 1) {
      return (
        <FirstType key={i} val={data}/>
      )
    } else if (type === 2) {
      return (
        <SecondType key={i} val={data} />
      )
    } else if(type === 3) {
      return (
        <ThirdType key={i} val={data}/>
      )
    } else if(type === 4) {
      return (
        <FourType key={i} val={data} />
      )
    } else if(type === 5) {
      return (
        <FiveType key={i} val={data} />
      )
    } else if(type === 6) {
      return (
        <SixType key={i} val={data} />
      )
    } else if(type === 9) {
      return (
        <NineType key={i} val={data} />
      )
    } else if(type === 10) {
      return (
        <TenType key={i} val={data} />
      )
    }
  }

  renderWithDetailMsg = (detailMsg) => {
    return (
      <View>
        {
          _.map(detailMsg, (v, i) => {
            let data = _.clone(v.date || {})
            data.timeD = this.state.timeD
            data.xTitle = this.props.navigation.state.params.codeName
            data.xtype = this.state.xtype
            data.dw = v.dw
            return (
              <View key={i}>
                {
                  this.judgeType(v.type, data, i )
                }
              </View>
            )

          })
        }
      </View>
    )
  }
}

class FirstType extends PureComponent {
  constructor(props) {
    super(props)
  }
  buildTitle = (timeD, title = "", xtype) => {
    const startTime = timeD.startTime
    const endTime = timeD.endTime
    const timeIdx = endTime.indexOf('.')
    const fulTime = endTime.substring(0, timeIdx) + "年" + endTime.substring(timeIdx + 1) + "月"
    if(xtype === "assetLiability") {
      return fulTime + " " + title
    }
    return startTime + "-" + endTime + " " + title
  }
  render() {
    const { val } = this.props
    const title = this.buildTitle(val.timeD, val.xTitle, val.xtype)
    const moneyContent = (val.content || '') + (val['dw'] ||"")
    const times = val['times']
    return (
      <View>
        <SingleTitle zi={title} chou={moneyContent} yin={times}/>
        <WhiteSpace />
      </View>
    )
  }
}

class SecondType extends PureComponent {
  constructor(props) {
    super(props)
  }

  render() {
    const { val } = this.props
    const title = val.title || ""
    const dw = val.dw
    const lineContent = commonService.analyseLine(val.content, dw)
    return (
      <View>
        <OwnCard title={title}>
          <Echarts option={lineContent} height={screen.pxToDp(500)} />
          <YJ yj={val.yj}/>
        </OwnCard>
        <WhiteSpace />
      </View>
    )
  }
}

class ThirdType extends PureComponent {
  constructor(props) {
    super(props)
  }
  render() {
    const { val } = this.props
    const title = val.title || ""
    const content = (val.content || [])[0] || ""
    return (
      <View>
        <OwnCard title={title}>
          <ViewMoreText>{content}</ViewMoreText>
        </OwnCard>
        <WhiteSpace />
      </View>
    )
  }
}

class FourType extends PureComponent {
  constructor(props) {
    super(props)
  }
  render() {
    const { val } = this.props;
    const title = val.title || ""
    const content = val || {}
    const tuyuan = content.tuyuan || []
    console.log('tu yuan is ', tuyuan)
    const pieContent = commonService.analysePie(tuyuan)

    const hengxian = content.hengxian || {}
    const legends = hengxian.keyList || []
    const hengxianD = hengxian.date || []
    const yAxisDatas = _.map(hengxianD, (v) => {
      return v.name
    })
    var arr = []
    _.map(legends, (v, i) => {
      let arrInner = []
      _.map(hengxianD, (vv, j) => {
        const dd = vv.date || []
        arrInner.push(dd[i] || 0)
      })
      arr.push(arrInner)
    })
    const cyDatas = commonService.analyseCylinderHorizen('', legends,yAxisDatas, arr)
    return (
      <View>
        <OwnCard title={title}>
          {/*<Echarts option={pieContent} height={screen.pxToDp(450)}/>*/}
          {
            <Echarts option={cyDatas} height={screen.pxToDp(600)}/>
          }
          <YJ yj={val.yj}/>
        </OwnCard>
        <WhiteSpace />
      </View>
    )
  }
}

class FiveType extends PureComponent {
  constructor(props) {
    super(props)
  }
  render() {
    const { val } = this.props;
    const title = val.title || ""
    const pieContent = commonService.analysePie(val.content)
    return (
      <View>
        <OwnCard title={title}>
          <Echarts option={pieContent} height={screen.pxToDp(550)} />
          <YJ yj={val.yj}/>
        </OwnCard>
        <WhiteSpace />
      </View>
    )
  }
}

class SixType extends PureComponent {
  constructor(props) {
    super(props)
  }
  render() {
    const { val } = this.props
    const title = val.title || ""
    const lineContent = commonService.analyseCylinder(val.content)
    return (
      <View>
        <OwnCard title={title}>
          <Echarts option={lineContent} height={screen.pxToDp(500)}/>
          <YJ yj={val.yj}/>
        </OwnCard>
        <WhiteSpace />
      </View>
    )
  }
}

class NineType extends PureComponent {
  constructor(props) {
    super(props)
  }
  render() {
    const { val } = this.props;
    const title = val.title || ""
    const flowContent = commonService.analyseEvlenType(val, val.dw);
    return (
      <View>
        <OwnCard title={title}>
          <Echarts option={flowContent} height={screen.pxToDp(650)}/>
          <YJ yj={val.yj}/>
        </OwnCard>
        <WhiteSpace />
      </View>
    )
  }
}

class TenType extends PureComponent {
  constructor(props) {
    super(props)
  }
  render() {
    const  { val } = this.props;
    const title = val.title || ""
    const flowContent = commonService.analyseFlow(val, val.dw)
    return (
      <View>
        <OwnCard title={title}>
          <Echarts option={flowContent} height={screen.pxToDp(650)}/>
          <YJ yj={val.yj}/>
        </OwnCard>
        <WhiteSpace />
      </View>
    )
  }
}

class ElevnType extends PureComponent {
  constructor(props) {
    super(props)
  }
  render() {
    const { val } = this.props;
    const title = val.title || ""
    const flowContent = commonService.analyseEvlenType(val, val.dw);
    return (
      <View>
        <OwnCard title={title}>
          <Echarts option={flowContent} height={screen.pxToDp(650)}/>
          <YJ yj={val.yj}/>
        </OwnCard>
        <WhiteSpace />
      </View>
    )
  }
}

class YJ extends PureComponent {
  render() {
    const { yj } = this.props;
    return yj != undefined && (
      <View style={{margin: screen.pxToDp(20), borderWidth: 1, borderColor: 'red', padding: screen.pxToDp(20)}}>
        <Text style={{color: 'red'}}>{yj}</Text>
      </View>
    ) || (<View></View>)
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
})
